<template>
  <div class="report">
    <v-chart class="chart" :option="option" />
  </div>
</template>

<script>
import { getReport } from "@/http/api";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, LinesChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart from "vue-echarts";
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  LinesChart,
  GridComponent,
  LineChart,
]);

export default {
  components: {
    VChart,
  },
  data() {
    return {
      option: {},
    };
  },
  methods: {
    async getReport() {
      const res = await getReport(1);
      this.option = {
        ...res,
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.6)",
          textStyle: {
            color: "#fff",
          },
        },
      };
      console.log(res);
    },
  },
  created() {
    this.getReport();
  },
};
</script>

<style>
.chart {
  width: 400px;
  height: 300px;
}
</style>
